<template>
  <div>
    <h1>PC 端组件展示</h1>
    <p>这是一个用于集中展示和测试所有 PC 端 Axiom 组件的页面。</p>

    <AxiomSection title="基础组件">
      <div class="component-grid">
        <AxiomTitle title="PC 端专属组件" description="专为桌面端设计的复杂组件" level="2" type="page" />
        <AxiomDivider />
        <AxiomCard title="数据表格 AxiomDataTable" style="margin-top: 2rem;">
          <AxiomDataTable :data="tableData" :columns="tableColumns" />
        </AxiomCard>
        
        <AxiomCard title="PC 布局组件" style="margin-top: 2rem;">
          <AxiomText>
            您当前看到的整个页面布局，包括顶栏、侧边栏和面包屑导航，都是由 <code>AxiomPCMainLayout</code>, <code>AxiomPCAppHeader</code>, <code>AxiomPCSidebarNav</code>, 和 <code>AxiomPCBreadcrumb</code> 共同驱动的。
          </AxiomText>
        </AxiomCard>
      </div>
    </AxiomSection>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { AxiomCard, AxiomText, AxiomDataTable, AxiomTitle, AxiomDivider } from 'axiom-view';

const tableColumns = ref([
  { prop: 'date', label: '日期', width: 180 },
  { prop: 'name', label: '姓名', width: 180 },
  { prop: 'address', label: '地址' },
]);

const tableData = ref([
  { date: '2023-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
  { date: '2023-05-04', name: '张三', address: '北京市朝阳区芍药居' },
  { date: '2023-05-01', name: '李四', address: '深圳市南山区科技园' },
  { date: '2023-05-03', name: '赵五', address: '杭州市西湖区' },
]);
</script> 